Initialize MSAL before use to fix auth regression #2685

pamelafox · 2025-08-18T17:34:44Z

Purpose

Fix MSAL auth regression after the MSAL 4.x upgrade that caused "uninitialized_public_client_application" when MSAL APIs were called before initialization. This change:

Creates a stable PublicClientApplication instance and awaits initialize() before use
Adds exception handling and console logging to initialization
Adds a tiny loading placeholder during initialization so the app still renders

Fixes #2675.

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[ ] Yes
[x] No

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[ ] Yes
[x] No

Type of change

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Code quality checklist

See CONTRIBUTING.md for more details.

The current tests all pass (python -m pytest).
I added tests that prove my fix is effective or that my feature works
I ran python -m pytest --cov to verify 100% coverage of added lines
I ran python -m mypy to check for type errors
I either used the pre-commit hooks or ran ruff and black manually on my code.

…async init (fixes uninitialized_public_client_application); show small loading state

Copilot

Pull Request Overview

This PR fixes an MSAL authentication regression that occurred after upgrading to MSAL 4.x, where calling MSAL APIs before initialization caused "uninitialized_public_client_application" errors. The fix ensures proper MSAL initialization with error handling and provides a loading state during initialization.

Creates a stable PublicClientApplication instance using useMemo to prevent re-initialization
Adds proper async initialization with await on initialize() before using MSAL APIs
Implements error handling, console logging, and a loading placeholder during initialization

app/frontend/src/layoutWrapper.tsx

pamelafox · 2025-08-18T17:41:00Z

app/frontend/src/layoutWrapper.tsx

    if (useLogin) {
-        var msalInstance = new PublicClientApplication(msalConfig);
+        // Create a stable MSAL instance (avoid re-init/duplicate listeners; single shared client for MsalProvider).
+        const msalInstance = useMemo(() => new PublicClientApplication(msalConfig), []);


Cline's suggested fix did not use useMemo, but Copilot+GPT5 thought it was a good idea, to avoid re-construction across renders.

The docs show this general type of pattern for accomplishing that (without useMemo()), but useMemo() should achieve the goal of ensuring it's only created once. I don't know enough about the app to understand the overall flow and how often the component is rerendered. But, assuming it is, useMemo should help there.

It's an SPA - my understanding is that this wrapper holds all the content displayed and shouldn't be re-rendered unless the page is refreshed

pamelafox · 2025-08-18T17:41:42Z

app/frontend/src/layoutWrapper.tsx

+        const msalInstance = useMemo(() => new PublicClientApplication(msalConfig), []);
+        const [initialized, setInitialized] = useState(false);
+        // Track mount state so we don't call setState after unmount if async init resolves late
+        const mounted = useRef<boolean>(true);


The new mounted ref is to avoid setState calls inside the async init() below if the component unmounts during all that. Don't know how common that is.

…alize() gated with try/finally

mattgotteiner

LGTM

Recommend switching to singleton pattern to make it easier

https://learn.microsoft.com/en-us/entra/msal/javascript/react/getting-started#initialization

Combined with something like this

// main bootstrap (index.tsx or similar)
import { createRoot } from "react-dom/client";
import { MsalProvider } from "@azure/msal-react";
import { msalInstance } from "./auth/msal";
import App from "./App";

(async () => {
await msalInstance.initialize(); // ensures MSAL is ready before any API use
createRoot(document.getElementById("root")!).render(

);
})();

pamelafox · 2025-08-20T16:58:49Z

@DanWahlin @mattgotteiner I've revised the PR to use an approach closer to the documentation, with the MsalProvider moved into index.tsx, and then Layout uses useMsal.

DanWahlin · 2025-08-20T18:54:25Z

I like that approach better. Eliminates any rerenders which would get rid of the singleton challenge.

frontend: Initialize MSAL before use, use stable instance, and guard …

251f4ab

…async init (fixes uninitialized_public_client_application); show small loading state

pamelafox requested a review from Copilot August 18, 2025 17:37

pamelafox changed the title ~~Initialize MSAL before use to fix auth regression (fixes #2675)~~ Initialize MSAL before use to fix auth regression Aug 18, 2025

pamelafox requested a review from mattgotteiner August 18, 2025 17:38

Copilot AI reviewed Aug 18, 2025

View reviewed changes

app/frontend/src/layoutWrapper.tsx Outdated Show resolved Hide resolved

pamelafox commented Aug 18, 2025

View reviewed changes

frontend: inline catch for checkLoggedIn during auth init; keep initi…

5356dfe

…alize() gated with try/finally

pamelafox mentioned this pull request Aug 18, 2025

Broken Authentication Due to MSAL Library Upgrade #2675

Closed

mattgotteiner approved these changes Aug 20, 2025

View reviewed changes

pamelafox and others added 2 commits August 20, 2025 09:52

Use different approach with MsalProvider in index

f213e75

Merge branch 'main' into fix/msal-initialize-and-stable-instance

d39706b

pamelafox marked this pull request as ready for review August 20, 2025 17:10

Merge branch 'main' into fix/msal-initialize-and-stable-instance

eadd7f2

pamelafox merged commit 84cf73e into Azure-Samples:main Aug 21, 2025
26 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Initialize MSAL before use to fix auth regression #2685

Initialize MSAL before use to fix auth regression #2685

pamelafox commented Aug 18, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

pamelafox Aug 18, 2025

Uh oh!

DanWahlin Aug 19, 2025 •

edited

Loading

Uh oh!

mattgotteiner Aug 20, 2025

Uh oh!

pamelafox Aug 18, 2025

Uh oh!

mattgotteiner left a comment •

edited

Loading

Uh oh!

pamelafox commented Aug 20, 2025

Uh oh!

DanWahlin commented Aug 20, 2025

Uh oh!

Uh oh!

Uh oh!

Initialize MSAL before use to fix auth regression #2685

Initialize MSAL before use to fix auth regression #2685

Conversation

pamelafox commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Does this introduce a breaking change?

Does this require changes to learn.microsoft.com docs?

Type of change

Code quality checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

pamelafox Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

DanWahlin Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mattgotteiner Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

pamelafox Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

mattgotteiner left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pamelafox commented Aug 20, 2025

Uh oh!

DanWahlin commented Aug 20, 2025

Uh oh!

Uh oh!

Uh oh!

pamelafox commented Aug 18, 2025 •

edited

Loading

DanWahlin Aug 19, 2025 •

edited

Loading

mattgotteiner left a comment •

edited

Loading